<template>
    <ul class="sy-boxb-l-cu">
        <li class="flex-align" v-for="(item, index) in list" :key="index">
            <div class="flex1 flex-align">
                <span class="sy-boxb-l-cua"></span>
                <nuxt-link to="">
                    <span class="ellipsis">{{ item.title }}</span>
                </nuxt-link>
            </div>
            <span class="sy-boxb-l-cub">{{ item.create_time }}</span>
        </li>
    </ul>
    <ul class="sy-boxb-l-cu dn">
        <li class="flex-align" v-for="(item, index) in 6" :key="index">
            <div class="flex1 flex-align">
                <span class="sy-boxb-l-cua"></span>
                <nuxt-link to="">
                    <span class="ellipsis">《宝可梦大探险》9.6日开启方可乐奇遇测试6日开启方可乐奇遇测试6日开启方可乐奇遇测试</span>
                </nuxt-link>
            </div>
            <span class="sy-boxb-l-cub">2025-01-25 10:48</span>
        </li>
    </ul>
    <ul class="sy-boxb-l-cu dn">
        <li class="flex-align" v-for="(item, index) in 5" :key="index">
            <div class="flex1 flex-align">
                <span class="sy-boxb-l-cua"></span>
                <nuxt-link to="">
                    <span class="ellipsis">《宝可梦大探险》9.6日开启方可乐奇遇测试6日开启方可乐奇遇测试6日开启方可乐奇遇测试</span>
                </nuxt-link>
            </div>
            <span class="sy-boxb-l-cub">2025-01-25 10:48</span>
        </li>
    </ul>
</template>

<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

</script>

<style scoped lang="scss">
.sy-boxb-l-cu {
    padding-bottom: 12px;
    overflow: hidden;
    border-bottom: 1px solid #EEEEEE;

    li {
        position: relative;
        margin-top: 16px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;

        &:first-child {
            margin-top: 12px;
        }

        .sy-boxb-l-cua {
            margin-right: 10px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #333333;
        }

        a {
            display: flex;
            width: 300px;
        }

    }


    .sy-boxb-l-cub {}
}
</style>